<template>
  <a-modal
    :visible="visible"
    title="确认收款"
    cancelText="取消"
    width="750px"
    okText="确认收款"
    @ok="submit"
    @cancel="cancel"
  >
    <div class="title">
      <a-row>
        <a-col :span="24">收款信息</a-col>
      </a-row>
    </div>
    <a-row>
      <a-col :span="8">收款单号：{{ formState.data.localWaterNo }}</a-col>
      <a-col :span="8">付款对象：{{ formState.data.recName }}</a-col>
      <a-col :span="8">付款类型：{{ formatter(formState.data.produceWay, 'produceWay') }}</a-col>
    </a-row>
    <a-row>
      <a-col :span="8">币种：{{ formatter(formState.data.currency, 'currency') }}</a-col>
      <a-col :span="8">交易金额：{{ formState.data.tradeAmt }}</a-col>
      <a-col :span="8">等额人名币：{{ formState.data.rmbAmt }}</a-col>
    </a-row>
    <a-row>
      <!-- <a-col :span="8">付款类型：{{ formState.paymentMethod }}</a-col> -->
      <a-col :span="8">缴款人：{{ formState.data.payName }}</a-col>
      <a-col :span="8">缴款账号：{{ formState.data.payAmt }}</a-col>
      <a-col :span="8">支付方式：{{ formatter(formState.data.paymentMethod, 'paymentMethod') }}</a-col>
    </a-row>
    <a-row>
      <a-col :span="8">收款账号：{{ formState.data.recAmt }}</a-col>
    </a-row>
    <div class="title">
      <a-row>
        <a-col :span="24">负责人</a-col>
      </a-row>
    </div>
    <a-row>
      <a-col :span="8">销售负责人：{{ formState.data.saleHead }}</a-col>
      <a-col :span="8">项目负责人：{{ formState.data.asdHead }}</a-col>
      <a-col :span="8">分销人：{{ formState.data.actHead }}</a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { defineComponent, reactive, createVNode, ref, watch } from "vue";
import { message, modal } from "ant-design-vue";
import { queryFinance, editFinance } from "../../../api/module/finance-payment";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import moment from 'moment'
import { getDictByCodesReturnObj } from "../../../tools/get-dict";
import dictEnum from "../../../const/dict";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    record: {
      type: Object,
      default: () => {}
    },
    type: {
      type: String,
      default: 'pay'
    }
  },
  emit: ["close"],
  setup(props, context) {

    const formRef = ref();
    const formState = reactive({
      data: {}
    });
    const dictLists = reactive({
      data: {}
    })

    const cancel = e => {
      context.emit("close", 'confirmVisible');
    };

    const submit = e => {
      modal.confirm({
        title: "确认后将不可撤销，确认已收到款?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确认收款",
        cancelText: "取消",
        onOk() {
          formState.data.checkStatus = 6
          editFinance({...formState.data}).then(res => {
            if (res.success) {
              cancel()
            }
          })
        }
      })
    };
    const formatter = (value, type) => {
      let result = '';
      switch (type) {
        case 'currency': {
          const item = dictLists.data[dictEnum.CURRENCY]
                        ? dictLists.data[dictEnum.CURRENCY].find((v) => v.value == value)
                        : {};
          result = item ? item.label : "";
        }
        break;
        case 'paymentMethod': {
          const item = dictLists.data[dictEnum.PAY_METHOD]
                        ? dictLists.data[dictEnum.PAY_METHOD].find((v) => v.value == value)
                        : {};
          result = item ? item.label : "";
        }
        break;
        case 'produceWay': {
          const item = dictLists.data[dictEnum.GENERATION_MODE]
                        ? dictLists.data[dictEnum.GENERATION_MODE].find((v) => v.value == value)
                        : {};
          result = item ? item.label : "";
        }
        break;
        case 'checkStatus': {
          const item = dictLists.data[dictEnum.COLLECTION_PAY_STATE]
                        ? dictLists.data[dictEnum.COLLECTION_PAY_STATE].find((v) => v.value == value)
                        : {};
          result = item ? item.label : "";
        }
        break;
        case 'paymentTime': {
          result = value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : "";
        }
        break;
        case 'createTime': {
          result = value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : "";
        }
        break;
      }
      return result;
    }
    const getDetails = async () => {
      const { id } = props.record
      const param = {
        fncType: props.type == 'pay' ? 2 : 1,
        id
      }
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.CURRENCY, // 币种
        dictEnum.PAY_METHOD, // 支付方式
        dictEnum.COLLECTION_PAY_STATE, // 状态
        dictEnum.GENERATION_MODE, // 产生方式
      ]);
      if (id) {
        queryFinance(param).then(res => {
          if (res.success) {
            formState.data = {
              ...res.data
            }
          }
        })
      }
    }
    getDetails()

    return {
      cancel,
      submit,
      formRef,
      formState,
      dictEnum,
      dictLists,
      formatter,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    };
  }
});
</script>
<style lang="less" scoped>
.title {
  color: #000;
  font-weight: 700;
}
/deep/.ant-col {
  padding: 10px 0;
}
.content {
  margin: 0px -10px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px dashed #d1d1d1;
}
</style>
